<template>
  <div class="app-container ">

    <!-- 操作区-->
    <el-row class="search-collapse">
      <el-col :span="24">
        <el-button type="success" @click="addForm">新增</el-button>
      </el-col>
    </el-row>

    <!-- 数据显示区 -->
    <el-row class="select-table table-striped">
      <el-col :span="24">

       <el-table :data="responseVO.data"  border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column   prop="name"  label="老师名称"></el-table-column>
         <el-table-column   label="头像">
           <template slot-scope="scope">
             <img :src="scope.row.portrait" width="150">
           </template>
         </el-table-column>
         <el-table-column   prop="createBy"  label="创建者"></el-table-column>
         <el-table-column   prop="createTime"  label="创建时间"></el-table-column>

        <el-table-column label="操作">
                      <template slot-scope = "scope">
                        <el-button type="text" class="el-icon-edit" @click="editForm(scope.row)">编辑</el-button>
                        <el-button type="text" class="el-icon-delete" @click="deleteForm(scope.row)">删除</el-button>
                      </template>
        </el-table-column>
       </el-table>

       <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="searchForm.pageNumber"
             :page-sizes="[5,10,20,30, 50]"
             :page-size="searchForm.pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="responseVO.total">
           </el-pagination>

      </el-col>
    </el-row>

    <!-- 编辑框-->
    <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="500px" >

      <el-form :model="form"  ref="form">
        <el-form-item label="老师名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="头像" :label-width="formLabelWidth" prop="portrait">
          <el-upload :action="uploadURL" :on-success="handleSuccess"  list-type="picture" >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-input v-model="form.portrait" v-show="false"></el-input>
        </el-form-item>
        <el-form-item label="创建者" :label-width="formLabelWidth" prop="createBy">
          <el-input v-model="form.createBy" ></el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm" >确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
// 引用 数据访问层
import courseTeacherService from '@/service/courseTeacherService'
// vue规范，绝对不能乱写的
export default {
  // 1、初始化数据语法
  data() {
    return {
      // 查询条件js对象
      searchForm: {
        pageNumber: 1,
        pageSize: 5
      },
      // 分页数据对象
      responseVO: {
        data: [],
        total: 0
      },
      // 表格多选的数据
      multipleSelection: [],
      //对话框
      dialogFormVisible: false,
      title: '新增',
      formLabelWidth: '100px',
      // 向后台提交的数据
      form: {
        id: undefined,
        name: undefined,
        portrait: undefined
      },
      uploadURL:'http://127.0.0.1:28080/common/image/upload'

    }
  },
  // 2、vue管理的方法
  methods: {
    // 每页几笔发化变化
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      // 重新加载数据
      courseTeacherService.loadData()
    },
    // 当前是第几页
    handleCurrentChange(val) {
      this.searchForm.pageNumber =val
      // 重新加载数据
      courseTeacherService.loadData()
    },
    // 表格多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 编辑按钮事件
    editForm (data) {
      courseTeacherService.editForm(data)
    },
    // 对话框保存按钮
    saveForm() {
      courseTeacherService.saveForm()
    },
    addForm() {
      courseTeacherService.addForm()
    },
    deleteForm(data) {
      courseTeacherService.deleteForm(data)
    },

    // 监听图片上传成功的事件
        handleSuccess(response) {
          console.log(response)
          // 1. 拼接得到一个图片信息对象
          let imgurl = response.data.server+"/"+response.data.path
          // 2. 将图片信息对象，push 到pics数组中
          this.form.portrait = imgurl
        }
  },
  // 3、vue初始化以后自动执行方法
  created() {
    // 没有这步直接报错
    courseTeacherService.init(this)
    courseTeacherService.loadData()
  }

}

</script>
